<template>
    <v-card class="hot-rank-card" rounded="lg" elevation="5">
        <v-card-title class="hot-rank-title d-flex align-center">
            <v-icon color="#b7534f" class="mr-2">mdi-fire</v-icon>
            热度视频 排行榜
        </v-card-title>
        <v-list class="hot-rank-list" height="350px">
            <v-list-item 
                v-for="(rank, n) in rankList" 
                :key="n"
                :title="rank.title" 
                :to="`/?play=${rank.videoId}&n=${n}`" 
                :active="false"
                class="hot-rank-item"
                :class="`rank-${n}`"
                rounded="lg"
                variant="text"
            >
                <template #prepend>
                    <div class="rank-number" :class="`rank-${n+1}-badge`">
                        {{ n + 1 }}
                    </div>
                </template>
                <template #subtitle>
                    <div class="d-flex align-center">
                        <v-icon size="small" color="#d18547" class="mr-1">mdi-trending-up</v-icon>
                        <span>{{ `${rank.hotFormat} 热度` }}</span>
                    </div>
                </template>
            </v-list-item>
        </v-list>
    </v-card>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { apiVideoHotRank } from '../apis/video';

const rankList = ref([])
onMounted(() => {
    apiVideoHotRank().then(({ data }) => {
        rankList.value = data.data.splice(0, 10)
    })
})
</script>
<style scoped>
.hot-rank-card {
    background-color: #1e1e2d;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.hot-rank-title {
    background: linear-gradient(to right, #3a4054, #2c3e50);
    color: #e0e0e0;
    padding: 10px 16px;
    font-weight: bold;
    font-size: 1.1rem;
}

.hot-rank-list {
    background-color: #1e1e2d !important;
    padding: 8px;
}

.hot-rank-item {
    margin-bottom: 6px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.hot-rank-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    transform: translateX(4px);
}

.rank-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: bold;
    background-color: #363646;
    color: #e0e0e0;
    margin-right: 8px;
}

.rank-1-badge {
    background-color: #b7534f;
    color: #f0f0f0;
}

.rank-2-badge {
    background-color: #d18547;
    color: #f0f0f0;
}

.rank-3-badge {
    background-color: #4a8f5e;
    color: #f0f0f0;
}
</style>